<template>
  <d2-container>

    <template slot="header">

      <el-form :gutter="24" ref="search-box" :model="mainQuery"  label-position="left" :inline="true" size="mini">

        <el-form-item label="商户号" prop="">
          <el-input placeholder="" v-model="mainQuery.mchNo" @keyup.enter.native="handleSearch" clearable></el-input>
        </el-form-item>

        <el-form-item label="监控条件" size="mini">
          <el-select v-model="mainQuery.type" placeholder="所有" clearable @change="handleSearch">
            <el-option v-for="item in alarmMchTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

      </el-form>

      <div class="search-btn-box">
        <div class="left">
          <el-button-group>
            <el-button class="filter-item" icon="el-icon-plus" type="success" @click="handleAdd" size="mini">添加</el-button>
          </el-button-group>
        </div>
        <div class="right">
          <el-button class="filter-item" icon="el-icon-refresh" type="default" @click="resetMainData" :loading="mainTable.loading" size="mini">重置</el-button>
          <el-button class="filter-item" icon="el-icon-search" type="primary" @click="handleSearch" :loading="mainTable.loading" size="mini">查询</el-button>
        </div>
      </div>
    </template>

    <!--主列表数据-->
    <el-table :border="mainTable.options.border" :size="mainTable.options.size" :stripe="mainTable.options.stripe" :highlight-current-row="mainTable.options.highlightCurrentRow" :data="mainTable.list" style="width: 100%"
      @current-change="onMainCurrentChange"
      @row-dblclick="onMainDoubleClick"
    >
      <template v-for="item in mainTable.columns">
        <el-table-column :prop="item.key" :label="item.title" :formatter="item.formatter" :align="item.align" :width="item.width" :min-width="item.minWidth"></el-table-column>
      </template>
      <el-table-column prop="" label="操作" align="center" width="120">
        <template slot-scope="scope">
          <dropdown-action :scope="scope" 
            @handle-set="handleSet"
            @handle-del="handleDel"
            @handle-bind-admin="handleBindAdmin"
            ></dropdown-action>
        </template>
      </el-table-column>

    </el-table>

    <!-- <d2-crud
      ref="d2Crud"
      :options="mainTable.options"
      :index-row="mainTable.indexRow"
      :columns="mainTable.columns"
      :data="mainTable.list"
      :selection-row="mainTable.allowSelect"
      :loading="mainTable.loading"
      :rowHandle="mainTable.rowHandle"
      @current-change="onMainCurrentChange"
      @row-dblclick="onMainDoubleClick"
      @handle-set="handleSet"
      @handle-del="handleDel"
      @selection-change=""
    ></d2-crud> -->

    <template slot="footer">
      <el-pagination
        @size-change="handleMainSizeChange"
        @current-change="handleMainPageChange"
        :current-page="mainTable.pagination.currentPage"
        :page-sizes="mainTable.pagination.pageSizes"
        :page-size="mainTable.pagination.pageSize"
        :page-count="mainTable.pagination.pageCount"
        :total="mainTable.pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
        >
      </el-pagination>
    </template>

    <dialog-add ref="dialog-add"
      :alarmMchTypeOptions="alarmMchTypeOptions"
      @dialog-close="fetchMainData"
    ></dialog-add>

    <dialog-bind-admin ref="dialog-bind-admin"></dialog-bind-admin>

  </d2-container>
</template>

<script>

import ApiMain from '@/api/alarm.mch';
import util from '@/libs/util.js';
import {
  alarmMchTypeOptions
} from '@/const/constant';

import DropdownAction from './dropdown-action';
import DialogAdd from './dialog-add';
import DialogBindAdmin from './dialog-bind-admin';

export default {
  name: 'alarm-mch',
  mixins: [
  ],
  components: {
    DropdownAction,
    DialogAdd,
    DialogBindAdmin,
  },
  data () {
    return {

      alarmMchTypeOptions,

      mainQueryRaw: null,
      mainQuery: {
        bankName: '',
        type: '',
      },

      mainTable: {
        loading: false,
        options: {
          border             : true,
          stripe             : true,
          highlightCurrentRow: true,
          emptyText          : '暂无数据',
          size               : 'mini',
        },
        // indexRow: {
        //   title:'序号',
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        columns: [
          {title: '商户号', key: 'mchNo', align: 'left', showOverflowTooltip: true, fixed: 'left'},
          {title: '监控条件', key: 'type', align: 'left', showOverflowTooltip: true, formatter: (row, col, val, i) => {
            return util.tool.strFromOptions(val, this.alarmMchTypeOptions, '-');
          }},
          {title: '监控时效', key: 'triggerInterval', align: 'right', showOverflowTooltip: true, formatter: (row, col, val, i) => {
            return Math.floor(val / 60) + ' 分钟';
          }},
          {title: '出现笔数', key: 'triggerCount', align: 'right', showOverflowTooltip: true, formatter: (row, col, val, i) => {
            return val === null ? '-' : val + ' 笔';
          }},
          // {title: '失败原因', key: 'bankRespmsgInfo', align: 'left', showOverflowTooltip: true, formatter: (row, col, val, i) => {
          //   return !val ? '-' : val;
          // }},
          {title: '预警邮件发送时间间隔', key: 'mailInterval', align: 'right', showOverflowTooltip: true, formatter: (row, col, val, i) => {
            if (val <= 0) {
              return '-';
            } else {
              return Math.floor(val / 60) + ' 分钟';
            }
          }},
          {title: '创建时间', key: 'createTime', align: 'center', showOverflowTooltip: true, width: '180'},
        ],
        list: [],
        rowHandle: {
          width: 200,
          align: 'center',
          fixed: 'right',
          custom: [
            {
              text: '修改',
              type: 'default',
              icon: 'el-icon-edit',
              size: 'mini',
              emit: 'handle-set',
            },
            {
              text: '删除',
              icon: 'el-icon-delete',
              type: 'default',
              plain: true,
              size: 'mini',
              emit: 'handle-del',
            }
          ],
        },
        rowHandle: null,
        pagination: {
          currentPage: 1,
          pageSize   : 50,
          total      : 0,
          pageSizes  : [50, 100, 200]
        },
      },

    }
  },
  mounted () {
    this.mainQueryRaw = Object.copy(this.mainQuery);
    this.fetchOptions().finally(() => {
      this.resetMainData();
    });
  },
  beforeDestroy () {
  },
  methods: {
    renderMainData (re) {
      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    handleSearch () {
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData();
    },
    
    handleMainSizeChange (val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData()
    },
    handleMainPageChange (val) {
      this.mainTable.pagination.currentPage = val;
      this.fetchMainData()
    },

    buildMainQuery () {

      var query = {
        page  : this.mainTable.pagination.currentPage,
        limit : this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData () {

      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.fetchMainData();
    },

    async fetchOptions () {
      
    },

    async fetchMainData () {

      this.mainTable.loading = true;

      try {
        var re = await ApiMain.list(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) {}

      this.mainTable.loading = false;

    },

    onMainCurrentChange (now, old) {
      this.mainTable.current = now;
    },

    onMainDoubleClick (now) {
      this.mainTable.current = now;
      this.handleSet({row: now});
    },

    handleAdd () {
      this.$refs['dialog-add'].show();
    },

    handleSet ({row}) {
      this.$refs['dialog-add'].show(Object.copy(row));
    },

    // 删除
    handleDel ({row}) {

      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ApiMain.del({id: row.id}).then(() => {
          this.$message({message: '操作成功', type: 'success'});
          this.fetchMainData();
        });
      });
    },

    handleBindAdmin ({row}) {
      this.$refs['dialog-bind-admin'].show(Object.copy(row));
    },
  }
}
</script>

<style>

</style>
